
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Console: Using the ConsoleFilters plugin</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-debug.js"></script>
<style type="text/css">
#yconsole {
    position: static;
    margin: 0 auto 1em;
}

#demo .yui-console .yui-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui-console .yui-console-entry-meta {
    margin: 0;
}
</style>

</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Console: Using the ConsoleFilters plugin</h1></div>
</div>
<div id="bd">

	<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>

	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Console: Using the ConsoleFilters plugin</h2>

	<div id="example" class="promo">
	<p>
	<p>This example illustrates how to use and configure the ConsoleFilters plugin for Console.  The debug versions of YUI module files are used, so standard YUI debugging messages are broadcast to the Console.</p>

<p>Use the checkboxes in the Console footer to control which messages are displayed or hidden.  Click the &quot;Log a message&quot; button to call <code>Y.log</code> using a custom category and source.</p>

<p>Note how new filter checkboxes are added when a new category or source are received by the Console, for example when clicking on the &quot;Log a message&quot; button.</p>
	</p>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="console_filter_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="demo">
    <div id="yconsole"></div>
    <button id="log" type="button">Log a message</button>
    <button id="hide_info" type="button">Hide info messages</button>
</div>
<script type="text/javascript">
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {event:true, attribute:true, node:true, base:true, widget:true, MyApp:true}}).use("console", "console-filters", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// create the console instance
var yconsole = new Y.Console({
    boundingBox: '#yconsole',
    height: '400px',
    width: '450px',
    newestOnTop: false,
    plugins: [ Y.Plugin.ConsoleFilters ]
}).render();

// Unknown categories and sources are allowed.
yconsole.filter.hideCategory('error');

// hide and show methods support N arguments.
yconsole.filter.hideSource('attribute','event','widget');

/* Alternately
var yconsole = new Y.Console({
    boundingBox: '#console',
    height: '400px',
    width: '450px',
    newestOnTop: false
}).plug(Y.Plugin.ConsoleFilters, {
    category: {
        error: false
    },
    source: {
        attribute: false,
        event: false,
        widget: false
    }
}).render();
*/

// Broadcast a log message from a button that uses a custom category and source
Y.get('#log').on('click', function () {
    Y.log('Logging a message to the Console','my_stuff','MyApp');
});

// It is also possible to set the filter's subattributes directly
Y.get('#hide_info').on('click', function () {
    yconsole.filter.set('category.info', false);
});

});
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3 class="first">Configure the YUI instance for debug mode</h3>
<p>Only the <code><em>module</em>-debug.js</code> versions of module files include log statements, so we'll set up our YUI instance's <code>filter</code> property to &quot;debug&quot;.  We'll also reduce the noise somewhat by specifying a <code>logInclude</code> list.</p>
<textarea class="JScript" name="code" cols="60" rows="1">
YUI({
    base: "../../build/",
    filter: 'debug',
    logInclude: {
        event: true,
        attribute: true,
        base: true,
        widget: true,
        node: true,
        MyApp: true  // This must be included for the custom source message
    },
    timeout: 10000
}).use("console-filters", function (Y) { ... });
</textarea>

<h3>Create the Console and plug in ConsoleFilters</h3>
<p>All that's left to do now is plugin in the ConsoleFilters plugin.  This can be done in one of a few ways.</p>
<textarea class="JScript" name="code" cols="60" rows="1">
// create the console instance
var yconsole = new Y.Console({
    boundingBox: '#console',
    height: '400px',
    width: '450px',
    newestOnTop: false,
    plugins: [ Y.Plugin.ConsoleFilters ]
}).render();

// Unknown categories and sources are allowed.
yconsole.filter.hideCategory('error');

// hide and show methods support N arguments.
yconsole.filter.hideSource('attribute','event','widget');
</textarea>

<p>Alternatively, you can attach the ConsoleFilters plugin after instantiation.  This version also shows how to apply initial category and source filter states.</p>
<textarea class="JScript" name="code" cols="60" rows="1">
var yconsole = new Y.Console({
    boundingBox: '#console',
    height: '400px',
    width: '450px',
    newestOnTop: false
}).plug(Y.Plugin.ConsoleFilters, {
    category: {
        error: false
    },
    source: {
        attribute: false,
        event: false,
        widget: false
    }
}).render();
</script>
</textarea>

<h3>Full Code Listing</h3>

<h4>Markup</h4>
<textarea class="HTML" name="code" cols="60" rows="1">
<div id="demo">
    <div id="yconsole"></div>
    <button id="log" type="button">Log a message</button>
    <button id="hide_info" type="button">Hide info messages</button>
</div>
</textarea>

<h4>JavaScript</h4>
<textarea class="JScript" name="code" cols="60" rows="1">
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000, filter:"debug", logInclude: {event:true, attribute:true, node:true, base:true, widget:true, MyApp:true}}).use("console", "console-filters", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// create the console instance
var yconsole = new Y.Console({
    boundingBox: '#yconsole',
    height: '400px',
    width: '450px',
    newestOnTop: false,
    plugins: [ Y.Plugin.ConsoleFilters ]
}).render();

// Unknown categories and sources are allowed.
yconsole.filter.hideCategory('error');

// hide and show methods support N arguments.
yconsole.filter.hideSource('attribute','event','widget');

/* Alternately
var yconsole = new Y.Console({
    boundingBox: '#yconsole',
    height: '400px',
    width: '450px',
    newestOnTop: false
}).plug(Y.Plugin.ConsoleFilters, {
    category: {
        error: false
    },
    source: {
        attribute: false,
        event: false,
        widget: false
    }
}).render();
*/

// Broadcast a log message from a button that uses a custom category and source
Y.get('#log').on('click', function () {
    Y.log('Logging a message to the Console','my_stuff','MyApp');
});

// It is also possible to set the filter's subattributes directly
Y.get('#hide_info').on('click', function () {
    yconsole.filter.set('category.info', false);
});

});
</textarea>

<h4>CSS</h4>
<textarea class="CSS" name="code" cols="60" rows="1">
#console {
    position: static;
    margin: 0 auto 1em;
}

#demo .yui-console .yui-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui-console .yui-console-entry-meta {
    margin: 0;
}
</textarea>
				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Console Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../console/console_basic.html'>Creating a Console for debugging</a></li><li><a href='../console/console_yui_config.html'>YUI configuration to filter log messages</a></li><li class='selected'><a href='../console/console_filter.html'>Using the ConsoleFilters plugin</a></li><li><a href='../console/console_global.html'>Creating a universal Console</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More Console Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/console/">User's Guide</a> (external)</li> -->
						<li><a href="../../api/module_console.html">API Documentation</a></li>
</ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="selected "><a title="Console - Functional Examples" href="../../examples/console/index.html">Console</a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2009 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
